<!DOCTYPE html>
<html>
<head>
  <title>scrapy log</title>
  <meta charset="UTF-8" />
  <link href="/static/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
  <script type="text/javascript" src="/static/js/jquery.js"></script>
</head>
<body>
  <div class="container">
    <h1>抓取日志</h1>
    <hr>
      WebSocket status : <span id="message"></span>
    <hr>
    <pre>
      <div id="content">
      </div>
    </pre>
  </div>
  <script>
    var ws = new WebSocket('ws://192.168.0.192:8888/tail');
    var $message = $('#message');
    var $content = $('#content');
    ws.onopen = function(){
      $message.attr("class", 'label label-success');
      $message.text('open');
    };
    ws.onmessage = function(ev){
      $message.attr("class", 'label label-info');
      $message.hide();
      $message.fadeIn("fast");
      $message.text('received message');
      $content.append(ev.data);
    };
    ws.onclose = function(ev){
      $message.attr("class", 'label label-important');
      $message.text('closed');
    };
    ws.onerror = function(ev){
      $message.attr("class", 'label label-warning');
      $message.text('error occurred');
    };
  </script>
</body>
</html>